<template>
  <edit-layout ref="layout" :page="page" :form="form" @invoke="invoke">
    <el-form
      ref="form"
      :model="form"
      :size="page.settings.formSize"
      :label-width="page.settings.labelWidth"
    >
      <el-divider content-position="left">回头车信息</el-divider>
      <el-form-item v-if="form.id" label="状态:" prop="used">
        <el-tag v-if="form.used=='Y'" type="success">已预定</el-tag>
        <el-tag v-else-if="form.used=='N'" type="danger">已过期</el-tag>
        <el-tag v-else-if="form.used=='W'" type="danger">待预定</el-tag>
        <el-tag v-else-if="form.used=='C'" type="warning">待审核</el-tag>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="驾驶员名称:" prop="name">
            <label>{{ form.drivingName }}</label>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶员手机号码:" prop="name">
            <label>{{ form.drivingPhone }}</label>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号:" prop="no">
            <label>{{ form.carNo }}</label>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发车地:" prop="sort">
            <label>{{ form.startArea }} {{ form.startAddress }}</label>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地:" prop="sort">
            <label>{{ form.endArea }} {{ form.endAddress }}</label>
          </el-form-item>
        </el-col>
      </el-row>

      <div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间:" prop="sort">
              <label>{{ form.createTime }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="过期时间:" prop="sort">
              <label>{{ form.expireTime }}</label>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.used =='Y' || form.subscribeName">
        <el-divider content-position="left">预约信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="预订人名称:" prop="sort">
              <label>{{ form.subscribeName }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预订时间:" prop="sort">
              <label>{{ form.subscribeTime }}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预订人手机号码:" prop="sort">
              <label>{{ form.subscribePhone }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="装货地址:" prop="sort">
          <label>{{ form.remark }}</label>
        </el-form-item>
      </div>

    </el-form>
  </edit-layout>
</template>
<script>
import adminSupport from 'lola-admin-support-el'

export default {
  name: 'BackCarEdit',
  mixins: [adminSupport.mixins.edit],
  data() {
    return {
      name: 'BackCar'
    }
  },
  mounted() {
    this.page.tip = ''
    this.init() // 初始化
  },
  methods: {
    init() {
      const that = this
      that.page.ids.push(this.$route.params.no) // 页面主参数赋值
      that.loadData() // 加载数据
      // const oldTitle = this.$route.meta.title
      // const editTitle = this.$route.params.title
      // document.title = oldTitle + editTitle
      // console.log(oldTitle + editTitle)
    },
    appendForm() {
      const roleIds = []
      if (this.form.roles != null) {
        this.form.roles.forEach(item => {
          roleIds.push(item.id)
        })
      }
      this.form.roleIds = roleIds
    },
    buildForm() {
      return true
    }
  }
}
</script>
